<template>
  <div>
    <el-card>
      <!-- 顶部布局 -->
      <header>
        <el-button type="primary">返回首页</el-button>
        <p>装备百度数据融合服务系统</p>
      </header>
      <!-- 搜索词条 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            v-model="input"
            placeholder="请输入内容"
            @focus=show
            @blur=hidee
          ></el-input>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            @click="goon"
          >进入词条</el-button>
        </el-col>
      </el-row>
      <div
        class="hide"
        v-show="hide"
      >
        <p>主坦克采购合同</p>
        <p>主坦克</p>
        <p>克采购合同</p>
        <p>主克采购合同fdf</p>
        <p>主克采购合同fdf</p>
        <p>主克采购合同fdf</p>
        <p>主克采购合同fdf</p>
      </div>
      <!-- 相关搜索推荐 ,分为两部分-->
      <div class="search-first">
        <div class="search-wrapper">
          <!-- 左侧搜索内容 -->
          <div class="search-left">
            <!-- 每一项,分为左右侧，一侧文字，一侧图片 -->
            <div class="search-item">
              <div class="search-content">
                <!-- 名称以及来源 -->
                <div class="search-name">
                  <a href="">99A2主坦克采购合同</a>
                  <span>数据来源：词条百科</span>
                </div>
                <!-- 内容-->

                <div class="content-left">
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    我今天看军事频道，中国武警爬山作战，在日本，美国，韩
                    国军队是不常见的，他们国家对于山地作战，沙漠作战，城市
                    作战会用直升机平台，或者无人机，其作战效率高，成本也低。
                    我们经常嘲笑印度军队，根本来说如果中国军队打战，跟印度军
                    队没区别。中国军队有先进的武器，但是因为作战理论的落后，
                    实战基本跟印度军队查不了多少。当兵不是做苦力。一流军队吃肉，
                    二流军队吃干粮。这就是现代的军事说法​​​​
                  </p>
                </div>
              </div>
              <div class="content-right">
                <img
                  :src="backImg"
                  class="imgs"
                >
              </div>

            </div>
          </div>
          <!-- 左侧搜索内容 -->
          <!-- 每一项,分为左右侧，一侧文字，一侧图片 -->
          <div class="search-item">
            <div class="search-content">
              <!-- 名称以及来源 -->
              <div class="search-name">
                <a href="">99A2主坦克采购合同</a>
                <span>数据来源：词条百科</span>
              </div>
              <!-- 内容-->

              <div class="content-left">
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  我今天看军事频道，中国武警爬山作战，在日本，美国，韩
                  国军队是不常见的，他们国家对于山地作战，沙漠作战，城市
                  作战会用直升机平台，或者无人机，其作战效率高，成本也低。
                  队没区别。中国军队有先进的武器，但是因为作战理论的落后，
                  二流军队吃干粮。这就是现代的军事说法​​​​
                </p>
              </div>
            </div>
            <div class="content-right">
              <img
                :src="backImg"
                class="imgs"
              >
            </div>

          </div>

        </div>
        <!-- 相关推荐 -->
        <div class="right-wrapper">
          <p>相关推荐</p>
          <ul>
            <li>
              俄罗斯T-90坦克性能指标
            </li>
            <li>
              俄罗斯T-90坦克性能指标
            </li>
            <li>
              俄罗斯T-90坦克性能指标
            </li>
          </ul>
        </div>
      </div>
      <!-- 分页组件 -->
      <Pagination
        class="el-paginations"
        v-bind:child-msg="pageparm"
        @callFather="callFather"
      ></Pagination>
    </el-card>
  </div>
</template>
<script>
import backImg from "../../assets/img/2.png";
import Pagination from "../../components/Pagination";

export default {
  // 注册组件
  components: {
    Pagination
  },
  data() {
    return {
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      backImg: backImg,
      input: "",
      // 控制盒子的显示和隐藏
      hide: false
    };
  },
  created() {
    this.hidee();
    this.goon();
  },
  methods: {
    goon() {
      if (this.input !== "") {
        this.hide = true;
      }
    },
    hidee() {
      this.hide = false;
    },
    show() {
      this.hide = true;
    }
  }
};
</script>
<style scoped>
li {
  list-style: none;
}
.el-card {
  height: 100%;
}
/* 顶部布局 */
header .el-button {
  float: left;
  margin-top: -12px;
}
header p {
  font-size: 21px;
  margin-left: 450px;
  margin-top: -5px;
}
/* 搜索栏 */
.el-col:nth-child(1) {
  margin-left: 320px;
  margin-top: 15px;
}
.el-col {
  margin-top: 15px;
}

/* 搜索记录 */
.search-wrapper {
  width: 69%;
  margin-left: 100px;
  border-top: 1px solid #000;
  margin-top: 50px;
}
.search-left {
  border-top: 1px solid #000;
}
.search-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid lightgray;
}
.search-item .search-name a {
  font-size: 18px;
}
.search-item .search-name span {
  font-size: 13px;
  margin-left: 15px;
  color: gray;
}
.content-left p {
  font-size: 15px;
}
/* 搜索图片 */
.search-content {
  padding: 12px 12px 5px 15px;
}
.content-right img {
  margin-right: 12px;
}
/* 相关推荐 */
.right-wrapper {
  flex: 1;
  margin-left: 15px;
  margin-top: 38px;
}
.right-wrapper p {
  width: 100px;
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  text-align: center;
}
.right-wrapper li {
  margin-left: -30px;
  font-size: 13px;
  color: rgb(77, 74, 74);
  line-height: 20px;
}
.search-first {
  display: flex;
}
/* 分页定位 */
.el-paginations {
  margin-left: 100px;
  margin-top: 20px;
}
/* 隐藏的盒子 */
.hide {
  width: 602px;
  height: 280px;
  border: 1px solid #000;
  position: absolute;
  margin-left: 320px;
  z-index: 5;
  background: white;

  border-radius: 8px;
}
.hide p {
  line-height: 20px;
  margin-left: 12px;
}
</style>


